<template>
    <van-sticky>
        <div class="topNav">
            <van-icon name="wap-nav" size="0.5rem" @click="showPopup(true)" />
            <van-search class="searchInput" v-model="search" placeholder="请输入搜索关键词" shape="round" @click="goSearch">
            </van-search>
            <van-icon name="service-o" size="0.5rem" @click="fail" />
        </div>
        <Popup :show="show" @closePopup="showPopup(false)"></Popup>
    </van-sticky>
    <van-notify id="van-notify" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Popup from '@/components/Popup/index.vue'
import router from '@/router';
import { showNotify } from 'vant';
const search = ref('')
const show = ref(false)
const showPopup = (s: boolean) => {
    show.value = s
}
const goSearch = () => {
    router.push({ path: '/search' })
}
const fail = () => {
    showNotify({ type: 'danger', message: '该功能尚未开发' });
}
</script>

<style lang = "less" scoped>
.topNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.2rem;
    background-color: #fff;

    .searchInput {
        width: 90%;
    }
}
</style>